<template>
  <div class="partItem2">
    <div class="anthologyLeft">
      <div v-if="anthologyList.length">
        <div class="anthologyList" v-for="(item,index) in anthologyList" @click.stop="choiseCourse(index)" :class="{'active':defaultIndex===index}">
          {{item.name}}
        </div>
      </div>
    </div>
    <div class="anthologyRight">
      <div class="anthologyRightItem" v-for="(item,index) in anthologyList" :class="{'active':defaultIndex===index}">
        <a  v-for="(item2,index) in item.son" >
          <router-link :to="{path:'/selectCourse',query:{id:item2.id}}" >
            <div class="anthologyImgList">
              <img :src=imgBg alt="">
              <p>{{item2.name}}</p>
            </div>
          </router-link>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapMutations} from 'vuex'
  export default({
    data(){
        return{
          imgBg:'http://dangjian.co-links.com/Static/Home/images/partSchollItem1.jpg',
          anthologyList:[],
          anthologyRightItem:[],
          defaultIndex:0
        }
    },
    methods:{
      ...mapMutations(['setpartDefault']),
      choiseCourse(index){
          this.defaultIndex  =index
      },
      initData(){
          this.axios.get('/home/School/getCate?'+`${this.baseUrl}`)
            .then((res)=>{
              this.anthologyList =res.data.data
//              console.log(this.anthologyList)
            })
            .catch((res)=>{
              console.log(res.error)
            })
      }
    },
    mounted(){
        this.initData()
        this.setpartDefault(1)
    }
  })
</script>
<style scoped="">
   .partItem2 {
    position: relative;
    height: 100%;
  }
   .anthologyLeft{
     display: inline-block;
     width: 2.5rem;
     position: absolute;
     left: 0;
     top:0;
     bottom: 0;
     background: #f9f5f5;
   }
   .anthologyList{
     font-size: 0.32rem;
     color: #000000;
     text-align: center;
     line-height: 0.86rem;
     height: 0.86rem;
     width: 100%;
   }
   .anthologyList.active{
     color: #e83329;
     border-bottom: 1px solid #e83329;
     background: white;
   }
   .anthologyRight{
     padding-top: 0.3rem;
     display: inline-block;
     width: 5rem;
     background: white;
     position: absolute;
     left: 2.5rem;
     right: 0;
     top:0;
     bottom: 0;
     padding: 0 0.32rem;
     padding-top: 0.3rem;
     background: white;
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
   }
   .anthologyImgList{
     position: relative;
     display: inline-block;
     width: 2rem;
     height: 2rem;
     text-align: center;
     line-height: 2rem;
     font-size: 0.32rem;
     color: white;

     padding-bottom: 0.3rem;
   }
   .anthologyImgList:nth-child(odd){
     margin-right: 0.1rem;
   }
   .anthologyImgList:nth-child(even){
     margin-left: 0.1rem;
   }
   .anthologyImgList p{
     position: absolute;
     left: 0;
     top:0;
     width: 100%;
     height: 100%;
   }
   .anthologyRightItem{
     display: none;
   }
   .anthologyRightItem.active{
     display: block;
   }
</style>
